import React, { useState, } from 'react'
import { NavBar } from 'react-vant'
import './payment.less'
export default function Pyment(props) {
    const [livedata] = useState([
        {
            title: '手机充值',
            icon: '#icon-shoujichongzhi'
        },
        {
            title: '生活缴费',
            icon: '#icon-shenghuojiaofei'
        },
        {
            title: 'Q币充值',
            icon: '#icon-qq'
        },
        {
            title: '城市服务',
            icon: '#icon-82'
        },
        {
            title: '腾讯公益',
            icon: '#icon-liebiaodaohang_gongyi'
        },
        {
            title: '医疗健康',
            icon: '#icon-yiliaojiankang'
        },
        {
            title: '健康码',
            icon: '#icon-jiankangma'
        },
    ])
    return (
        <div className='Pyment'>
            <header>
                <NavBar
                    title="支付"
                    leftArrow
                    onClickLeft={() => {
                        props.history.go(-1)
                    }}
                />
            </header>
            <main>
                <div className='mainTop'>
                    <div>
                        <p>
                            <svg className="icon" aria-hidden="true">
                                <use xlinkHref="#icon-shoufukuan"></use>
                            </svg>
                        </p>
                        <p>
                            收付款
                        </p>
                    </div>
                    <div>
                        <p>
                            <svg className="icon" aria-hidden="true">
                                <use xlinkHref="#icon-qianbao"></use>
                            </svg>
                        </p>
                        <p>
                            钱包
                        </p>
                        <p className='money'>
                            ￥1000.00
                        </p>
                    </div>
                </div>
                <div className='live'>
                    <p className='liveTltle'>生活服务</p>
                    <div className='liveList'>
                        {
                            livedata.map((itme, index) => {
                                return <div key={index}>
                                    <div>
                                        <svg className="icon" aria-hidden="true">
                                            <use xlinkHref={itme.icon}></use>
                                        </svg>
                                    </div>
                                    <div>
                                        {itme.title}
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </main>
        </div>
    )
}
